import Vue from 'vue'
import Router from 'vue-router'
// import { asyncRoutes } from './asyncRoutes'
Vue.use(Router)

/* Layout */
import Layout from '@/layout'
// 静态路由
export const constantRoutes = [
  // 登录页面
  {
    path: '/login',
    // 路由的懒加载 访问到对应页面的时候才会加载页面中的js文件
    component: () => import('@/views/Login/index'),
    hidden: true
  },
  // 404 页面
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  // 首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/Dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
  // 导入
  {
    path: '/import',
    component: Layout,
    hidden: true,
    children: [{
      path: '',
      name: 'Import',
      component: () => import('@/views/ImportExcel/index'),
      meta: { title: '批量员工导入' }
    }]
  },
  {
    path: '/employeeDetail/:id',
    component: Layout,
    hidden: true,
    children: [{
      path: '',
      name: 'employeeDetail',
      component: () => import('@/views/Employee/detail'),
      meta: { title: '批量员工导入', activeMenu: '/employee' }
    }]
  }

]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  // 路由模式
  mode: 'history',
  // 滚动条行为
  scrollBehavior: () => ({ y: 0 }),
  // 将动静路由结合 之后将其他的路由放在动态即可
  // 合并数组 用展开符
  // 去掉全量的动态路由 替换成过滤之后的路由
  routes: [...constantRoutes]
})

const router = createRouter()

// reset 路由方法  重置
export function resetRouter() {
  // 得到一个全新的 router 实例对象
  const newRouter = createRouter()
  // 使用新的路由记录覆盖掉老的路由记录
  router.matcher = newRouter.matcher // reset router
}

export default router
// 路由
// 1.将静态路由和动态路由进行拆分 之后进行合并
// 2.准备所有的动态路由和对应页面
// 3.将动态路由在新页面封装并导入(简化)

// 组织架构
// 1.使用card进行包裹
// 将elementUI组件进行实现样式功能
// 2.修改data样式进行数据渲染
// 3.自定义节点内容(作用域插槽插东西)
// 4.封装 重复的 组件（渲染树形结构）
// 5.新建文件定义接口 并 引入
// 在方法中调用接口 申请调用 created()
// 清除数组 方法中进行赋值 渲染列表
// 6.找父节点的子节点
// 数据格式转换
// 7.生成树形结构 使用递归(自己调自己)
// 数组重新赋值即可
// 8.绑定点击事件 接收
// 添加弹窗 新增弹窗方法里为true
// 9.关闭弹窗
// 修改弹框样式 新增关闭方法为false
// 10.实现表单样式 表单基础校验
// 表单绑定数据
// 11.进行自定义校验 部门名称/编码
// 子传父item 父创新对象接收 父创新数组进行全赋值
// 12.部门名称校验  (引入部门名称规则)
// 通过数组fliter过滤id让孩子与填写的name进行判断
// 13.部门名称编码  (引入部门编码规则)
// 14.下拉渲染
// 写并获取新增接口 开启弹窗中引入
// 新增数组赋值 绑定字段数据
// 15.定义新增接口
// 点击事件 新增 兜底校验
// 准备接口 关闭 弹窗 提示用户
// 刷新列表 清空重置(在关闭弹窗中) 手动处理
// 16.数据回显
// 写接口 调用并事件绑定 方法中调用并接收
// 17.部门名称校验，部门编码校验
// 18.代码用优化
// 19.用计算属性进行为弹框题目进行切换和 提示用户成功
// 20.表单重置
// this $refs.forRef.resetFidlds()
// 21.删除数据
// 定接口，传入方法使用(if 的二次确认)
// 调接口 提示 渲染数据
